<!DOCTYPE html>
<html>

<head>
  <style>
    #response {
      white-space: pre-wrap;
    }
  </style>
</head>

<body>
  <div id="window-label"></div>
  <div id="container"></div>
  <div id="response"></div>

  <script>
    var WebviewWindow = window.__TAURI__.window.WebviewWindow
    var appWindow = window.__TAURI__.window.appWindow
    var windowLabel = appWindow.label
    var windowLabelContainer = document.getElementById('window-label')
    windowLabelContainer.innerText = 'This is the ' + windowLabel + ' window.'

    var container = document.getElementById('container')

    function createWindowMessageBtn(label) {
      var tauriWindow = WebviewWindow.getByLabel(label)
      var button = document.createElement('button')
      button.innerText = 'Send message to ' + label
      button.addEventListener('click', function () {
        tauriWindow.emit('clicked', 'message from ' + windowLabel)
      })
      container.appendChild(button)
    }

    // global listener
    window.__TAURI__.event.listen('clicked', function (event) {
      responseContainer.innerHTML +=
        'Got ' + JSON.stringify(event) + ' on global listener\n\n'
    })
    window.__TAURI__.event.listen('tauri://window-created', function (event) {
      createWindowMessageBtn(event.payload.label)
    })

    var responseContainer = document.getElementById('response')
    // listener tied to this window
    appWindow.listen('clicked', function (event) {
      responseContainer.innerText +=
        'Got ' + JSON.stringify(event) + ' on window listener\n\n'
    })

    var createWindowButton = document.createElement('button')
    createWindowButton.innerHTML = 'Create window'
    createWindowButton.addEventListener('click', function () {
      var webviewWindow = new WebviewWindow(Math.random().toString().replace('.', ''))
      webviewWindow.once('tauri://created', function () {
        responseContainer.innerHTML += 'Created new webview'
      })
      webviewWindow.once('tauri://error', function (e) {
        responseContainer.innerHTML += 'Error creating new webview'
      })
    })
    container.appendChild(createWindowButton)

    var globalMessageButton = document.createElement('button')
    globalMessageButton.innerHTML = 'Send global message'
    globalMessageButton.addEventListener('click', function () {
      // emit to all windows
      window.__TAURI__.event.emit('clicked', 'message from ' + windowLabel)
    })
    container.appendChild(globalMessageButton)

    var allWindows = window.__TAURI__.window.getAll()
    for (var index in allWindows) {
      var label = allWindows[index].label
      if (label === windowLabel) {
        continue
      }
      createWindowMessageBtn(label)
    }
  </script>
</body>

</html>